{% extends 'layout/baseSite.html' %}
{% load static %}
{% block title %}蔬菜仓库{% endblock %}
{% block title2 %}蔬菜仓库{% endblock %}
{% block birc %}蔬菜仓库{% endblock %}

{% block content %}
<style>
  .operDiv{
    background: #e8e7e7;
    position: absolute;
    z-index: 1000;
    top: 300px;
    left: 35%;
    border-radius: 10px;
    padding: 12px 32px;
    display: none;
  }
  .deleteDiv{
    width: fit-content;
    height: 96px;
  }

  .operDiv button{
    outline: none;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px 10px;
  }
  .addInfo, .searchBtn{
    border-radius: 5px;
    outline: none;
    border: 1px solid #ddd;
    padding: 5px 8px;
    background: #fff;
    margin-bottom: 10px;
  }
  input[name=searchValue]{
    border-radius: 5px;
    border: 1px solid #ddd;
    outline: none;
  }
  .addInfo:hover, .searchBtn:hover{
    background: #ddd;
  }
  .addDiv input, .addDiv select, .editDiv input, .editDiv select{
    outline: none;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 0 5px;
  }
</style>
<div class="deleteDiv operDiv">
  {% csrf_token %}
  <input type="hidden" name="delId">
  <p style="margin-bottom: 10px;letter-spacing: 1px;">确认删除<span style="color: #e06a6a;" id="delName"></span>?</p>
  <button style="background: #e06a6a;" id="confimDel">确认</button>&nbsp;&nbsp;
  <button class="canlce">取消</button>
</div>
<div class="addDiv operDiv">
  <label>名称</label>
  <input type="text" name="name"><br>
  <label>产地</label>
  <input type="text" name="from_place"><br>
  <label>数量</label>
  <input type="number" name="number"><br>
  <label>价格</label>
  <input type="number" name="price"><br>
  <label>质量</label>
  <select name="quality">
    <option value="3">很好</option>
    <option value="2">一般</option>
    <option value="1">很差</option>
  </select>

  <br>
  <button style="background: #e06a6a;" id="confimAdd">确认</button>&nbsp;&nbsp;
  <button class="canlce">取消</button>
</div>
<div class="editDiv operDiv">
  <input type="hidden" name="edit_id">
  <label>名称</label>
  <input type="text" name="edit_name"><br>
  <label>产地</label>
  <input type="text" name="edit_from_place"><br>
  <label>数量</label>
  <input type="number" name="edit_number"><br>
  <label>价格</label>
  <input type="number" name="edit_price"><br>
  <label>质量</label>
  <select name="edit_quality">
    <option value="3">很好</option>
    <option value="2">一般</option>
    <option value="1">很差</option>
  </select>

  <br>
  <button style="background: #e06a6a;" id="confimEdit">确认</button>&nbsp;&nbsp;
  <button class="canlce">取消</button>
</div>
<div class="container-fluid py-4">
  <div class="row">
    <div class="col-12">
      <input type="text" name="searchValue">
      <button class="searchBtn">搜索</button>
      &nbsp;&nbsp;
      <button class="addInfo">肉类入库</button>
      &nbsp;&nbsp;
      {% if search %}
      <span>搜索 <span style="color: #e06a6a;">{{ search }}</span> 的结果</span>
      {% endif %}
      <div class="card mb-4">
        <div class="card-body px-0 pt-0 pb-2">
          <div class="table-responsive p-0">
            <table class="table align-items-center mb-0">
              <thead>
                <tr>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">名称</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">库存</th>
                  <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">质量</th>
                  <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">产地</th>
                  <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">入库时间</th>
                  <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">价格</th>
                  <th class="text-secondary opacity-7"></th>
                </tr>
              </thead>
              <tbody>
                {% for veg in vegetables %}
                <tr>
                  <td>
                    <div class="d-flex px-2 py-1">
                      <div class="d-flex flex-column justify-content-center">
                        <h6 class="mb-0 text-sm">{{ veg.name }}</h6>
                        <!-- <p class="text-xs text-secondary mb-0">john@creative-tim.com</p> -->
                      </div>
                    </div>
                  </td>
                  <td>
                    <p class="text-xs font-weight-bold mb-0">{{ veg.number }}</p>
                  </td>
                  <td class="align-middle text-center text-sm">
                    <p class="text-xs font-weight-bold mb-0">{{ veg.quality_str }}</p>
                  </td>
                  <td class="align-middle text-center">
                    <span class="text-secondary text-xs font-weight-bold">{{ veg.from_place }}</span>
                  </td>
                  <td class="align-middle text-center">
                    <span class="text-secondary text-xs font-weight-bold">{{ veg.in_time|date:"Y/m/d H:i" }}</span>
                  </td>
                  <td class="align-middle text-center">
                    <span class="text-secondary text-xs font-weight-bold">{{ veg.price }}</span>
                  </td>
                  <td class="align-middle">
                    <a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
                      <span onclick="infoEdit('{{ veg.id }}', '{{ veg.name }}', '{{ veg.number }}', '{{ veg.quality }}', '{{ veg.from_place }}', '{{ veg.price }}')">修改</span> / 
                      <span onclick="infoDel('{{ veg.id }}', '{{ veg.name }}')" style="color: #e06a6a;">删除</span>
                    </a>
                  </td>
                </tr>
                {% endfor %}

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<script type="text/javascript">
  $("#meatGo").addClass("active");

  function infoDel(vegId, studentName){
    $("#delName").text(studentName);
    $("input[name=delId]").val(vegId);
    $(".deleteDiv").fadeIn(200);
  }

  $(".canlce").click(function(){
    $(".operDiv").fadeOut(100);
  });

  $("#confimDel").click(function(){
    var vegId = $("input[name=delId]").val();
    var csrf = $("input[name=csrfmiddlewaretoken]").val();
    if (!vegId){
      return false;
    }
    $.post(
      "/web/meat/del-meat/" + vegId,
      {
        csrfmiddlewaretoken: csrf,
      },
      function(res){
        if (res.success){
          toastr.success(res.message);
          window.setTimeout(function(){
            window.location.reload();
          }, 1000);
        }else{
          toastr.error(res.message);
        }
      }
    );
  });
  $(".addInfo").click(function(){
    $(".addDiv").fadeIn(100);
  });
  $("#confimAdd").click(function(){
    var csrf = $("input[name=csrfmiddlewaretoken]").val();
    var name = $("input[name=name]").val();
    var from_place = $("input[name=from_place]").val();
    var number = $("input[name=number]").val();
    var price = $("input[name=price]").val();
    var quality = $("select[name=quality]").val();
    if (!name || !from_place || !number || !price || !quality){
      toastr.error("请您填写完整信息");
      return false;
    }

    $.post(
      "/web/meat/add-meat/",
      {
        csrfmiddlewaretoken: csrf,
        name: name,
        from_place: from_place,
        number: number,
        price: price,
        quality: quality
      },
      function (res){
        if(res.success){
          toastr.success("入库成功");
          window.setTimeout(function(){
            window.location.reload();
          }, 1000)
        }else{
          toastr.error(res.message);
        }
      }
    );
  });

  function infoEdit(vegId, name, number, quality, from_place, price){
    $("input[name=edit_id]").val(vegId);
    $("input[name=edit_name]").val(name);
    $("input[name=edit_from_place]").val(from_place);
    $("input[name=edit_number]").val(number);
    $("input[name=edit_price]").val(price);
    $("select[name=edit_quality]").val(quality);

    $(".editDiv").fadeIn(100);
  }

  $("#confimEdit").click(function (){
    var csrf = $("input[name=csrfmiddlewaretoken]").val();
    var vegId = $("input[name=edit_id]").val();
    var name = $("input[name=edit_name]").val();
    var from_place = $("input[name=edit_from_place]").val();
    var number = $("input[name=edit_number]").val();
    var price = $("input[name=edit_price]").val();
    var quality = $("select[name=edit_quality]").val();

    if (!name || !from_place || !number || !price || !quality){
      toastr.error("请您填写完整信息");
      return false;
    }

    $.post(
      "/web/meat/edit-meat/",
      {
        csrfmiddlewaretoken: csrf,
        id: vegId,
        name: name,
        from_place: from_place,
        number: number,
        price: price,
        quality: quality
      },
      function (res){
        if(res.success){
          toastr.success("修改成功");
          window.setTimeout(function(){
            window.location.reload();
          }, 1000)
        }else{
          toastr.error(res.message);
        }
      }
    );
  });
  $(".searchBtn").click(function(){
    var searchValue = $("input[name=searchValue]").val();

    window.location.href = "/web/meat/store?searchValue=" + searchValue;
  });
</script>
{% endblock %}